<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: sun
 * @Date: 2022-03-14 23:12:24
-->
<template>
  <div class="home-container container">
    <header style="position: relative;">
      <img src="@/assets/imgs/head.png" />
      <img
        src="@/assets/imgs/head2.png"
        style="width: 94%;display: block;margin:0.7rem auto 0px;"
      />
      <a
        href="https://article.95516.com/eq/ls/KPmcjnkD.html"
        style="    position: absolute;
    width: 80%;
    height: 1.5rem;
    z-index: 999;
    bottom: 2.3rem;
    left: 10%;"
      ></a>
    </header>
    <main>
      <!-- 主题背景 -->
      <section class="themeBox">
        <!-- <img src="@/assets/imgs/themeBg.png"  class="theme-pic" /> -->
      </section>
      <section class="viewBox">
        <div
          class="item"
          :class="{ active: nowDate > item.currentDate }"
          v-for="(item, index) in themeArr"
          :key="index"
          @click="jumpFn(index, item)"
        >
          <img
            :src="nowDate > item.currentDate ? item.activeImg : item.defaultImg"
            class="pic"
          />
        </div>
      </section>
    </main>
    <footer>
      <img src="@/assets/imgs/footer.png" />
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: '',
      nowDate: Date.parse(new Date()),
      themeArr: [
        {
          defaultImg: require('@/assets/imgs/1-1.png'),
          activeImg: require('@/assets/imgs/1.png'),
          currentDate: new Date('2022/05/08 00:00:00').getTime(),
        },
        {
          defaultImg: require('@/assets/imgs/2-2.png'),
          activeImg: require('@/assets/imgs/2.png'),
          currentDate: new Date('2022/05/22 00:00:00').getTime(),
        },
        {
          defaultImg: require('@/assets/imgs/3-3.png'),
          activeImg: require('@/assets/imgs/3.png'),
          currentDate: new Date('2022/05/29 00:00:00').getTime(),
        },
        {
          defaultImg: require('@/assets/imgs/4-4.png'),
          activeImg: require('@/assets/imgs/4.png'),
          currentDate: new Date('2022/06/05 00:00:00').getTime(),
        },
        {
          defaultImg: require('@/assets/imgs/5-5.png'),
          activeImg: require('@/assets/imgs/5.png'),
          currentDate: new Date('2022/06/12 00:00:00').getTime(),
        },
        {
          defaultImg: require('@/assets/imgs/6-6.png'),
          activeImg: require('@/assets/imgs/6.png'),
          currentDate: new Date('2022/06/19 00:00:00').getTime(),
        },
        {
          defaultImg: require('@/assets/imgs/7-7.png'),
          activeImg: require('@/assets/imgs/7.png'),
          currentDate: new Date('2022/06/26 00:00:00').getTime(),
        },
      ],
    };
  },
  methods: {},
  mounted() {
    const that = this;
  },
  methods: {
    jumpFn(index, item) {
      this.$router.push({ path: `/article/${index + 1}` });
    },
  },
};
</script>

<style lang="scss" scoped>
footer {
  img {
    max-width: 100%;
    display: block;
    margin: 0 auto 10px;
  }
}
.active {
  animation: change 2s infinite linear;
  -webkit-animation: change 2s infinite linear;
}
@keyframes change {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes change {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}
.home-container {
  background: url(../assets/imgs/b.png) no-repeat;
  background-size: 100% 100%;
  .viewBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 50px auto 0px;
    .item {
      width: 50%;
      margin: 0.3rem auto 0.8rem;
      img {
        width: 86%;
        display: block;
        margin: 0 auto;
      }
    }
  }
  main {
    padding: 0 0.5rem;
    .hint-pic,
    .theme-pic {
      display: block;
      width: 100%;
    }
  }
  header {
    img {
      display: block;
      width: 100%;
    }
  }
}
</style>
